<template>
  <div class="promotion-detail page-container">
    <div class="page-header">
      <div class="header-left">
        <el-button link @click="goBack" class="back-btn">
          <svg class="back-icon" viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
            />
          </svg>
          返回
        </el-button>
      </div>
      <div class="header-content">
        <h1 class="page-title">促销活动详情</h1>
        <p class="page-subtitle">查看促销活动的详细信息和配置</p>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <div v-else-if="!promotionData" class="error-container">
      <el-empty description="促销活动不存在或已被删除" />
    </div>

    <div v-else class="content-card">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="活动名称">
            {{ promotionData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="活动类型">
            <el-tag :type="getTypeTagType(promotionData.type)" size="small">
              {{ getTypeLabel(promotionData.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="活动状态">
            <el-tag :type="getStatusTagType(promotionData.status)" size="small">
              {{ getStatusLabel(promotionData.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">
            {{ promotionData.productName }}
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">
            {{ formatDateTime(promotionData.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            {{ formatDateTime(promotionData.endTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ promotionData.createdByName }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(promotionData.createdTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 商品配置 -->
      <div class="detail-section">
        <h3 class="section-title">商品配置</h3>
        <div class="product-list">
          <div
            v-for="(product, index) in promotionData.promotionProductVO"
            :key="index"
            class="product-item"
          >
            <div class="product-header">
              <div class="product-info">
                <div class="product-image" v-if="product.skuImage">
                  <img :src="product.skuImage" alt="商品图片" />
                </div>
                <div class="product-details">
                  <div class="product-name">
                    {{ getSkuName(product.skuId) }}
                  </div>
                  <div class="product-specs" v-if="getSkuSpecs(product.skuId)">
                    {{ getSkuSpecs(product.skuId) }}
                  </div>
                </div>
              </div>
              <div class="product-status">
                <el-tag
                  :type="product.status === 1 ? 'success' : 'info'"
                  size="small"
                >
                  {{ product.status === 1 ? "正常" : "停用" }}
                </el-tag>
              </div>
            </div>
            <el-descriptions :column="3" border size="small">
              <el-descriptions-item label="活动价">
                <span class="price"
                  >¥{{ product.promotionPrice.toFixed(2) }}</span
                >
              </el-descriptions-item>
              <el-descriptions-item label="促销库存">
                {{ product.promotionStock }}
              </el-descriptions-item>
              <el-descriptions-item label="已锁定库存">
                {{ product.lockedStock }}
              </el-descriptions-item>
              <el-descriptions-item label="限购数量">
                <span v-if="product.purchaseLimit === -1">无限制</span>
                <span v-else>{{ product.purchaseLimit }}件</span>
              </el-descriptions-item>
              <el-descriptions-item label="剩余库存">
                {{ product.promotionStock - product.lockedStock }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>

      <!-- 规则配置 -->
      <div
        v-if="
          promotionData.promotionRuleVOS &&
          promotionData.promotionRuleVOS.length > 0
        "
        class="detail-section"
      >
        <h3 class="section-title">规则配置</h3>
        <div class="rule-list">
          <div
            v-for="(rule, index) in promotionData.promotionRuleVOS"
            :key="index"
            class="rule-item"
            :class="getRuleItemClass(rule.ruleType)"
          >
            <div class="rule-header">
              <div class="rule-icon">
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  width="20"
                  height="20"
                >
                  <path
                    d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  />
                </svg>
              </div>
              <div class="rule-title">
                {{ getRuleTypeLabel(rule.ruleType) }}
              </div>
            </div>
            <div class="rule-content">
              <div class="rule-detail">{{ getRuleDetail(rule) }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动统计 -->
      <div class="detail-section">
        <h3 class="section-title">活动统计</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  width="24"
                  height="24"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ getTotalStock() }}</div>
                <div class="stat-label">总库存</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  width="24"
                  height="24"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ getLockedStock() }}</div>
                <div class="stat-label">已锁定</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  width="24"
                  height="24"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ getAvailableStock() }}</div>
                <div class="stat-label">可用库存</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  width="24"
                  height="24"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-value">
                  {{ promotionData.promotionProductVO?.length || 0 }}
                </div>
                <div class="stat-label">参与商品</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { getWithAuth } from "@/utils/request";
import dayjs from "dayjs";

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const promotionData = ref<any>(null);
const skuList = ref<any[]>([]);

// 获取活动类型标签
const getTypeTagType = (type: number) => {
  const typeMap: Record<number, string> = {
    1: "info",
    2: "success",
    3: "warning",
    4: "danger",
  };
  return typeMap[type] || "info";
};

// 获取活动类型标签文本
const getTypeLabel = (type: number) => {
  const typeMap: Record<number, string> = {
    1: "满减",
    2: "折扣",
    3: "特价",
    4: "拼团",
  };
  return typeMap[type] || "未知";
};

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "info",
    1: "success",
    2: "danger",
  };
  return statusMap[status] || "info";
};

// 获取状态标签文本
const getStatusLabel = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "未开始",
    1: "进行中",
    2: "已结束",
  };
  return statusMap[status] || "未知";
};

// 获取规则类型标签
const getRuleTypeLabel = (ruleType: number) => {
  const ruleTypeMap: Record<number, string> = {
    1: "满减规则",
    2: "折扣规则",
    3: "特价规则",
    4: "拼团规则",
  };
  return ruleTypeMap[ruleType] || "未知规则";
};

// 获取规则详情
const getRuleDetail = (rule: any) => {
  switch (rule.ruleType) {
    case 1: // 满减
      return `满${rule.fullAmount.toFixed(2)}减${rule.reduceAmount.toFixed(2)}`;
    case 2: // 折扣
      return `折扣${(rule.discount * 10).toFixed(1)}折`;
    case 3: // 特价价
      return `特价价¥${rule.promotionPrice.toFixed(2)}`;
    case 4: // 拼团
      return `${rule.groupSize}人团，限时${rule.validTime}分钟${
        rule.initiatorReduceAmount
          ? `，发起人减${rule.initiatorReduceAmount.toFixed(2)}`
          : ""
      }`;
    default:
      return "未知配置";
  }
};

// 获取规则项样式类
const getRuleItemClass = (ruleType: number) => {
  const classMap: Record<number, string> = {
    1: "rule-full-reduce",
    2: "rule-discount",
    3: "rule-seckill",
    4: "rule-group",
  };
  return classMap[ruleType] || "rule-default";
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("YYYY-MM-DD HH:mm:ss");
};

// 获取促销活动详情
const fetchPromotionDetail = async () => {
  const promotionId = route.params.id as string;
  if (!promotionId) {
    ElMessage.error("促销活动ID不存在");
    router.push("/promotions");
    return;
  }

  loading.value = true;
  try {
    const result = await getWithAuth(
      `/internal/promotion/detail?id=${promotionId}`
    );

    if (result.code === 0) {
      promotionData.value = result.data;

      // 获取SKU列表
      if (result.data.spuId) {
        await fetchSkuList(result.data.spuId);
      }
    } else {
      ElMessage.error(result.message || "获取促销活动详情失败");
      router.push("/promotions");
    }
  } catch (error) {
    console.error("获取促销活动详情失败:", error);
    ElMessage.error("获取促销活动详情失败");
    router.push("/promotions");
  } finally {
    loading.value = false;
  }
};

// 获取SKU列表
const fetchSkuList = async (spuId: string) => {
  try {
    const result = await getWithAuth(
      `/internal/product/skuList?spuId=${spuId}`
    );

    if (result.code === 0) {
      skuList.value = result.data || [];
    }
  } catch (error) {
    console.error("获取商品SKU失败:", error);
  }
};

// 获取SKU名称
const getSkuName = (skuId: string) => {
  const sku = skuList.value.find((s) => s.id === skuId);
  return sku ? sku.skuName : skuId;
};

// 获取SKU规格信息
const getSkuSpecs = (skuId: string) => {
  const sku = skuList.value.find((s) => s.id === skuId);
  return sku ? sku.specs : "";
};

// 获取总库存
const getTotalStock = () => {
  if (!promotionData.value?.promotionProductVO) return 0;
  return promotionData.value.promotionProductVO.reduce(
    (sum: number, product: any) => sum + product.promotionStock,
    0
  );
};

// 获取已锁定库存
const getLockedStock = () => {
  if (!promotionData.value?.promotionProductVO) return 0;
  return promotionData.value.promotionProductVO.reduce(
    (sum: number, product: any) => sum + product.lockedStock,
    0
  );
};

// 获取可用库存
const getAvailableStock = () => {
  return getTotalStock() - getLockedStock();
};

// 返回列表
const goBack = () => {
  router.push("/promotions");
};

// 页面加载时获取促销活动详情
onMounted(() => {
  fetchPromotionDetail();
});
</script>

<style scoped>
.promotion-detail {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.header-left {
  margin-right: 24px;
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #718096;
  margin: 0;
  font-size: 16px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-weight: 500;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: #1890ff;
}

.back-icon {
  width: 16px;
  height: 16px;
}

.loading-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.error-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.detail-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #4299e1;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  background: #f7fafc;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-image {
  flex-shrink: 0;
}

.product-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-name {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.product-specs {
  color: #718096;
  background: #f7fafc;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
  max-width: 200px;
}

.price {
  color: #ef4444;
  font-weight: 600;
  font-size: 16px;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rule-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  background: #f7fafc;
  position: relative;
  overflow: hidden;
}

.rule-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 2px 2px 0;
}

.rule-full-reduce {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}

.rule-full-reduce::before {
  background: #2196f3;
}

.rule-discount {
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
}

.rule-discount::before {
  background: #4caf50;
}

.rule-seckill {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.rule-seckill::before {
  background: #ff9800;
}

.rule-group {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
}

.rule-group::before {
  background: #e91e63;
}

.rule-default {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
}

.rule-default::before {
  background: #9e9e9e;
}

.rule-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.rule-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.rule-title {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.rule-content {
  margin-left: 44px;
}

.rule-detail {
  font-size: 14px;
  color: #4a5568;
  font-weight: 500;
}

.stat-card {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #4299e1;
  color: white;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #718096;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .promotion-detail {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 20px;
  }

  .header-left {
    margin-right: 0;
    margin-bottom: 8px;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .back-btn {
    align-self: flex-start;
    padding: 10px 20px;
  }

  .content-card {
    padding: 16px;
    border-radius: 10px;
  }

  .detail-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }

  .section-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .product-item {
    padding: 16px;
  }

  .product-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .product-image img {
    width: 50px;
    height: 50px;
  }

  .product-name {
    font-size: 14px;
  }

  .rule-item {
    padding: 16px;
  }

  .rule-header {
    margin-bottom: 8px;
  }

  .rule-icon {
    width: 28px;
    height: 28px;
  }

  .rule-title {
    font-size: 14px;
  }

  .rule-content {
    margin-left: 36px;
  }

  .stat-card {
    padding: 16px;
    gap: 12px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .promotion-detail {
    padding: 12px;
  }

  .page-header {
    padding: 16px;
    gap: 12px;
  }

  .header-left {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .page-title {
    font-size: 18px;
  }

  .page-subtitle {
    font-size: 12px;
  }

  .back-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .btn-icon {
    width: 14px;
    height: 14px;
  }

  .content-card {
    padding: 12px;
  }

  .detail-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .product-item {
    padding: 12px;
  }

  .product-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .product-image img {
    width: 40px;
    height: 40px;
  }

  .product-name {
    font-size: 13px;
  }

  .rule-item {
    padding: 12px;
  }

  .rule-header {
    margin-bottom: 6px;
  }

  .rule-icon {
    width: 24px;
    height: 24px;
  }

  .rule-title {
    font-size: 13px;
  }

  .rule-content {
    margin-left: 28px;
  }

  .stat-card {
    padding: 12px;
    gap: 8px;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
  }

  .stat-value {
    font-size: 18px;
  }

  .stat-label {
    font-size: 11px;
  }
}
</style>
